<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
                    <el-form-item label="员工姓名" prop="staffName">
                        <el-input v-model="queryParams.staffName" placeholder="请输入" clearable style="width: 240px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="证书名称" prop="name">
                        <el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 240px"
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="证书有效期" prop="dataRange">
                        <el-date-picker v-model="queryParams.dataRange" value-format="YYYY-MM-DD" type="daterange"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 40px;">
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="detectionList"
                    style="margin-top: 30px;margin-left: 20px;margin-right: 20px;width: calc(100% - 40px);">
                    <el-table-column type="index" width="50" label="序号" />
                    <el-table-column label="姓名" align="center" prop="staffName" />
                    <el-table-column label="证书名称" align="center" prop="name" width="200px" />
                    <el-table-column label="批准项目" align="center" prop="item" width="160px" />
                    <el-table-column label="级别" align="center" prop="level" width="160px" />
                    <el-table-column label="证书编号" align="center" prop="code" width="200px" />
                    <el-table-column label="初次取证日期" align="center" prop="ownTime" width="160px" />
                    <el-table-column label="有效期自" align="center" prop="expireTime" width="160px" />
                    <el-table-column label="操作" fixed="right" align="center" width="160px"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="success" @click="handleLook(scope.row)">查看</el-button>
                            <el-button link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getList" style="margin-right: 20px;" />
            </el-col>
        </el-row>

        <!-- 添加、详情 -->
        <el-dialog v-model="open" width="900px" destroy-on-close center append-to-body :title="getDialogTitle()">
            <el-form :model="popInfo" :rules="rules" ref="editFormRef" label-width="120px" :validate-on-rule-change='false'>
                <el-form-item label="资质文件" prop="name">
                    <ImageUpload v-if="dialogType != 3" v-model="popInfo.imgUrl" :limit="1" />
                    <el-image v-else style="width: 100px; height: 100px" :src="popInfo.imgUrl"
                        :preview-src-list="[popInfo.imgUrl]" fit="cover" />
                </el-form-item>
                <el-form-item label="姓名" prop="staffName">
                    <el-input v-model="popInfo.staffName" placeholder="" style="width: 280px" maxlength='20'
                        :readonly="dialogType == 3" />
                </el-form-item>
                <div class="flex-v">
                    <el-form-item label="证书名称" prop="name">
                        <el-input v-model="popInfo.name" placeholder="" style="width: 280px" maxlength='100'
                            :readonly="dialogType == 3" />
                    </el-form-item>
                    <el-form-item label="证书编号" prop="code">
                        <el-input v-model="popInfo.code" placeholder="" style="width: 280px" maxlength='100'
                            :readonly="dialogType == 3" />
                    </el-form-item>
                </div>
                <div class="flex-v">
                    <el-form-item label="批准项目" prop="item">
                        <el-input v-model="popInfo.item" placeholder="" style="width: 280px" maxlength='100'
                            :readonly="dialogType == 3" />
                    </el-form-item>
                    <el-form-item label="级别" prop="level">
                        <el-input v-model="popInfo.level" placeholder="" style="width: 280px" maxlength='100'
                            :readonly="dialogType == 3" />
                    </el-form-item>
                </div>
                <div class="flex-v">
                    <el-form-item label="初次取证日期" prop="ownTime">
                        <el-input v-model="popInfo.ownTime" placeholder="请选择" style="width: 280px" maxlength='100'
                            :readonly="dialogType == 3" />
                    </el-form-item>
                    <el-form-item label="有效期至" prop="expireTime">
                        <el-input v-model="popInfo.expireTime" placeholder="请选择" style="width: 280px" maxlength='100'
                            :readonly="dialogType == 3" />
                    </el-form-item>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="saveForm">{{ getDialogBtnTitle() }}</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
 
<script setup>
import {
    apiGetStaffQualificationsList
    , apiGetStaffQualificationsInfo
} from "@/api/staff";

const { proxy } = getCurrentInstance();

const detectionList = ref([]);
const loading = ref(false);
const open = ref(false);
const total = ref(0);
const dialogType = ref(1)

const data = reactive({
    popInfo: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    rules: {
    },
});

const { queryParams, popInfo, rules } = toRefs(data);

/** 查询列表 */
const getList = () => {
    loading.value = true;
    let params = {
        ...queryParams.value,
    }
    if (params.dataRange && params.dataRange.length > 0) {
        params.beginTime = params.beginTime + ' 00:00:00'
        params.endTime = params.endTime + ' 23:59:59'
    }
    apiGetStaffQualificationsList(params).then(res => {
        loading.value = false;
        if (res.data) {
            detectionList.value = res.data.records;
            total.value = res.data.total;
        } else {
            detectionList.value = [];
            total.value = 0;
        }
    }).catch(err => {
        loading.value = false;
        detectionList.value = [];
        total.value = 0;
    });
};

getList();

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
};


/** 重置操作表单 */
function reset() {
    popInfo.value = {};
    proxy.resetForm("userRef");
};

/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
};


const getDialogTitle = (row) => {
    if (dialogType.value == 1) {
        return '新增'
    } else if (dialogType.value == 2) {
        return '编辑'
    }
    return '详情'
}
const getDialogBtnTitle = () => {
    if (dialogType.value == 1) {
        return '保存新增'
    } else if (dialogType.value == 2) {
        return '提交更新'
    }
    return '详情'
}

const openAndClearForm = () => {
    open.value = true
    proxy.$refs["editFormRef"].clearValidate();
}

const handleAdd = (row) => {
    dialogType.value = 1
    rules.value = {}
    popInfo.value = {}
    openAndClearForm()
}

const handleUpdate = (row) => {
    popInfo.value = row
    dialogType.value = 2
    rules.value = {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        imgUrl: [{ required: true, message: "请输入", trigger: "blur" }],
        staffName: [{ required: true, message: "请输入", trigger: "blur" }],
        code: [{ required: true, message: "请输入", trigger: "blur" }],
        item: [{ required: true, message: "请输入", trigger: "blur" }],
        ownTime: [{ required: true, message: "请输入", trigger: "change" }],
        expireTime: [{ required: true, message: "请输入", trigger: "change" }],
        phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的联系电话", trigger: "blur" }],
    }
    openAndClearForm()
}


//详情
const handleLook = (row) => {
    loading.value = true;
    apiGetStaffQualificationsInfo(row.id).then(res => {
        loading.value = false;
        if (res.data) {
            popInfo.value = res.data
            dialogType.value = 3
            rules.value = {}
            openAndClearForm()
        }
    }).catch(err => {
        loading.value = false;
    });
}

const handleDelete = (row) => {
    proxy.$modal.confirm('是否确认删除该数据项？').then(() => {

    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

//弹窗确认操作
const saveForm = () => {
    proxy.$refs["editFormRef"].validate(valid => {
        if (valid) {
            proxy.$modal.msgSuccess("操作成功");
            open.value = false;
            detectionList.value.push(popInfo.value)
        }
    });
}

</script>
 

<style lang="scss" scoped>
.dialog-item-title {
    color: #000;
    font-size: 17px;
    padding-left: 10px;
    margin: 0 20px;
    border-left: 4px #00BFFF solid;
}

.now-select-txt {
    font-size: 15px;
    color: #fff;
    background: #00BFFF;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;

    span {
        font-size: 20px;
        font-weight: bold;
        margin: 0 10px;
    }

    div {
        cursor: pointer;
        margin-left: 30px;
        font-weight: bold;
    }
}
</style>